<template>
	<div class="order">
		<van-nav-bar title="订单"  right-text="编辑" left-arrow @click-right="onClickRight">
			<template #right>
				<van-icon name="search" size="18" />
			</template>
		</van-nav-bar>
		
		<van-tabs  sticky swipeable>
			<van-tab title="全部订单">
				<van-empty v-show="isEmptyall" description="没有订单哦~ 快去下单吧~" />
				
				<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
					<div v-for="order in tableData">
						<div class="order_box"  @click="toorderdetail(order)">
							<div>
								<van-image radius="10px" fit="cover" width="4rem" height="4rem" 
								:src="`http://localhost:8080/res/${order.order_pic}`" />
							</div>
							<div>
								<span>{{order.order_name}}</span>
								<span>{{order.order_remark}}</span>
							</div>
							<div>
								
								<span>￥{{order.order_true_price}}</span>
								<span>共{{order.foodSumAmount}}件</span>
							</div>
						</div>
						<div class="order_button" >
							<div >
								<van-icon  name="records" style="font-size: 20px;line-height: 30px;"/>
								{{order.orderState.constant_term_meaning}} 
							</div>
							<div >
								<van-button 
									@click="toorderdetail(order)"
									plain hairline type="info" size="small" color="#eb5b5b" >查看详情</van-button>
							</div>
						</div>
					</div>
				</van-pull-refresh>
			</van-tab>
			
			<van-tab title="待支付">
				<van-empty v-show="isEmptypay" description="没有待支付订单哦~ 快去下单吧~" />
				<div v-for="order in tableData1">
					<div class="order_box"  @click="toorderdetail(order)">
						<div>
							<van-image radius="10px" fit="cover" width="4rem" height="4rem" 
							:src="`http://localhost:8080/res/${order.order_pic}`" />
						</div>
						<div>
							<span>{{order.order_name}}</span>
							<span>{{order.order_remark}}</span>
						</div>
						<div>
							
							<span>￥{{order.order_true_price}}</span>
							<span>共{{order.foodSumAmount}}件</span>
						</div>
					</div>
					<div class="order_button">
						<div >
							<van-icon name="records" style="font-size: 20px;line-height: 30px;"/>
							{{order.orderState.constant_term_meaning}} 
						</div>
						<div>
							<van-button @click="ordertopay(order)" plain hairline type="info" size="small" color="#eb5b5b" >去支付</van-button>
						</div>
					</div>
				</div>
				
			</van-tab>
			<van-tab title="待评价">
				<van-empty v-show="isEmptyjudge" description="没有待评价订单哦~ 快去下单吧~" />
				<div v-for="order in tableData2">
					<div class="order_box"  @click="toorderdetail(order)">
						<div>
							<van-image radius="10px" fit="cover" width="4rem" height="4rem" 
							 :src="`http://localhost:8080/res/${order.order_pic}`"/>
						</div>
						<div>
							<span>{{order.order_name}}</span>
							<span>{{order.order_remark}}</span>
						</div>
						<div>
							<span>￥{{order.order_true_price}}</span>
							<span>共{{order.foodSumAmount}}件</span>
						</div>
					</div>
					<div class="order_button">
						<div >
							<van-icon name="records" style="font-size: 20px;line-height: 30px;"/>
							{{order.orderState.constant_term_meaning}} 
						</div>
						<div>
							<van-button 
							@click="tojudge(order)"
							plain hairline type="info" size="small" color="#eb5b5b" >去评价</van-button>
						</div>
					</div>
				</div>
			</van-tab>
			<div style="height:100px"></div>
		</van-tabs>
		
		<Navtab></Navtab>
	</div>
</template>

<script>
	import Navtab from "@/components/Navtab";
	import { Toast } from 'vant';

	export default{
		name:"Order",
		components:{Navtab},

		data() {
			return {
				isLoading: false,
				loginUser:'',//登录用户
				isEmptyall:false,
				isEmptypay:false,
				isEmptyjudge:false,
				url: 'https://img.yzcdn.cn/vant/cat.jpeg',
				tableData:[],//全部订单
				tableData1:[],//待支付订单 11
				tableData2:[],//待评价订单 17
				
			};
		},
		created() {
			this.axios.get(`http://localhost:8080/user/getlogin`).then(res => {
				this.loginUser = res.data.loginUser;
				console.log(this.loginUser);
				if(!this.loginUser){
					this.isEmptyall=true;
					this.isEmptypay=true;
					this.isEmptyjudge=true;
					//Toast('对不起,请先登录!');
					
				}else{
					//console.log(new Date());
					this.axios.get(`http://localhost:8080//goodorder/usergoodorder`).then(res => {
						console.log(res.data);
						this.tableData = res.data.usergoodorderlist;
						//this.importData = res.data.usergoodorderlist;
						for(let i=0;i<this.tableData.length;i++){
							//console.log(this.tableData[i].orderState.constant_term_id);
							//待支付
							if(this.tableData[i].orderState.constant_term_id==11){
								//console.log(this.tableData[i].orderState.constant_term_id);
								this.tableData1.push(this.tableData[i]);	
							}
							//待评价
							if(this.tableData[i].orderState.constant_term_id==17){
								//console.log(this.tableData[i].orderState.constant_term_id);
								this.tableData2.push(this.tableData[i]);
							}	
						}
						
						if(this.tableData.length<1){
							this.isEmptyall=true;
						}
						if(this.tableData1.length<1){
							this.isEmptypay=true;
						}
						if(this.tableData2.length<1){
							this.isEmptyjudge=true;
						}				
					});
					
				}
			});
			
		},
		
		methods: {
			onClickRight() {

			},
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.isLoading = false;
				}, 500);
			},
			//去评价
			tojudge(order){
				//111
				this.$router.push({
				name: 'Evaluation',
				params: {
					order:order,
				}
				})
			},
			//全部订单时候根据订单状态判断跳转
			toorderdetail(order){
				//console.log(order)
				if(order.status==11){//跳到待支付
					this.$router.push({
					name: 'OrderToPay',
					params: {
						order:order,
						//order_id:order.order_id
					}
					});	
				}else if( (order.status==12 )||(order.status==13)||(order.status==18)){//12已取消 13已过期 
					this.$router.push({
					name: 'OrderDetail',
					params: {
						order:order,
					}
					});
				}else if((order.status==14 )||(order.status==15)
				||(order.status==16)||(order.status==17)){//14已支付 15处理中 18已完成
					this.$router.push({
					name: 'OrderDelivery',
					params: {
						order:order,
					}
					});
				}
				
			},
			//订单待支付片的，支付按钮，去支付
			ordertopay(order){
				this.$router.push({
				name: 'PayOrder',
				params: {
					order: order,
				}
			});
			}
		},
	
		components:{
			Navtab,
		}

	}
</script>

<style lang="less">
	.order {
		overflow: auto;

		.order_box {
			height: 100px;
			background-color: #fff;
			margin-top: 10px;
			margin-left: 10px;
			margin-right: 10px;
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;
			display: flex;

			div:nth-child(1) {
				flex: 1;
				margin-left: 5px;
				margin-top: 8px;

			}

			div:nth-child(2) {
				flex: 4;
				display: flex;
				margin: 15px;
				flex-direction: column;
				justify-content: space-around;
				//background-color: lightblue;
				text-align: left;

				>span {
					
					&:nth-child(1) {

						font-size: 16px;
						line-height: 16px;
						color: #303133; //字体颜色
						font-weight: 600; //加粗
						letter-spacing: 1px;
					}

					&:nth-child(2) {

						font-size: 14px;
						line-height: 16px;
						color: #606266; //字体颜色
						letter-spacing: 1px;
					}
				}
			}

			div:nth-child(3) {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				//background-color: lightblue;
				margin: 15px;
				text-align: right;

				>span {
					// &:nth-child(1) {
					
					// 	font-size: 14px;
						
					// 	color: white; //字体颜色
						
					// 	letter-spacing: 1px;
					// }
					&:nth-child(1) {
						font-size: 18px;
						line-height: 18px;
						color: #4b4d50; //字体颜色
						font-weight: 600; //加粗
						letter-spacing: 1px;
					}

					&:nth-child(2) {
						font-size: 14px;
						line-height: 16px;
						color: #606266; //字体颜色
						font-weight: 400; //加粗
						letter-spacing: 1px;
					}
				}
			}

		}

		.order_button {
			display: flex;
			height: 45px;
			margin: 0 10px;
			background-color: #fff;
			justify-content: space-between;
			border-bottom-right-radius: 10px;
			border-bottom-left-radius: 10px;
			>div{
				margin: 0 10px;
				display: flex;
				&:nth-child(1){
					margin-left: 15px;
					font-size: 15px;
					line-height: 35px;
					color: #f5bc10; 
					letter-spacing: 1px;
				}
			}
		}
		.van-button__text{
			font-size: 14px;
		}
	}
</style>
